<template>
	<view class="course-list">
		<view class="list-item" v-for="course in courseList" :key="course.id">
			<image class="item-img" :src="course.cover"
				mode=""></image>
			<view class="item-info">
				<view class="info-title">{{course.title}}</view>
				<view class="info-sale">
					<text class="sale-price">￥{{course.price}} &nbsp;</text>
					<text class="sale-count">{{course.buyCount}}人购买</text>
				</view>
			</view>
		</view>
		<!-- 没有更多 -->
		<view class="nomore" v-if="params.page > pages">---已经到底啦---</view>
	</view>
</template>

<script lang="ts" setup>
	import courseReq from '@/api/course'
	import { ref } from 'vue'
	import { onLoad,onReachBottom } from '@dcloudio/uni-app'
	const pages = ref(1)
	const params = ref({ page: 1, limit: 10 })
	const courseList = ref([])
	// 定义一个类型来限制一下这个status的取值范围
	type StatusType = 'more' | 'nomore' | 'loading' | 'error'
	const status = ref<StatusType>('more')


	const getCourseListData = async () => {
		status.value = 'loading'
		const result = await courseReq.getCourseService(params.value)
		console.log('dd',result)
		if (result.code === 200) {
			if (result.data.items.length > 0) {
				if (result.data.items.length < 10) {
					// 当前数据不足十条
					status.value = "nomore"
				} else {
					status.value = "more"
				}
				
			}else{
				status.value = 'nomore'
			}
			courseList.value.push(...result.data.items)
						params.value.page++
		}
	}
	

	// 调用函数获取数据
	onLoad(() => {
		getCourseListData()
	})
	
	// 3. 上拉加载更加  也就是相当于是分页
		onReachBottom(()=>{
			status.value ==='more' && getCourseListData()
		})
</script>


<style lang="less" scoped>
	.course-list {
		background-color: #eee;
		height: 100%;

		.list-item {
			padding: 20upx;
			display: flex;
			background-color: #fff;
			margin-bottom: 20upx;

			.item-img {
				width: 228upx;
				width: 226upx;
				height: 128upx;
				margin-right: 20upx;
			}

			.item-info {
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.info-title {
					font-size: 24upx;
				}

				.info-sale {
					.sale-price {
						color: #f00;
					}

					.sale-count {
						font-size: 24upx;
						color: #999;
					}
				}
			}
		}
		.nomore {
					height: 100upx;
					line-height: 100upx;
					text-align: center;
					background-color: #eee;
					font-size:28upx;
					color:#00cc99;
				}
	}
</style>